<template>
  <div class="home-container">
    <h4>Home组件</h4>

    <hr />

    <button @click="getApi">点击发送GET请求</button>
    <button @click="jumpByPush">通过push跳转到“阿凡达”页面</button>
    <button @click="jumpByReplace">通过replace跳转到“阿凡达”页面</button>
    <router-link to="/main">访问后台主页</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    async getApi() {
      const { data: res } = await this.$http.get('/api/get')
      console.log(res)
    },
    jumpByPush() {
      // 通过编程式导航 API，跳转到指定页面
      // 会增加一条历史记录
      this.$router.push('/movie/1')
    },
    jumpByReplace() {
      // 不会增加历史记录
      this.$router.replace('/movie/1')
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  background-color: orange;
  height: auto;
  padding: 10px;
}
</style>
